<template>
    <div class="flex a-center j-between meta-title">
        <div class="title flex a-center">
            <span
                v-if="isShowTitle"
                class="f-shrink f-weight f14"
                :style="{ width: labelWidth + 'px' }"
                >{{ currentRoute.meta.title || props.title }}</span
            >
            <slot name="left"></slot>
        </div>
        <slot name="right"></slot>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

const currentRoute = useRoute()
const props = defineProps({
    isShowTitle: {
        type: Boolean,
        default: true
    },
    title: {
        type: String,
        default: ''
    },
    labelWidth: {
        type: Number,
        default: 90
    }
})
</script>

<style lang="scss" scoped>
.meta-title {
    .title {
        color: rgb(96, 98, 102);
    }
}
</style>
